<style scoped lang="less">
</style>
<template>
	<iot-blk class="status-blk" :title="title" :moreType="0">
		<div class="chart" id="typeChart"></div>
	</iot-blk>
</template>
<script>
import HighCharts from 'highcharts'
import { mapState } from 'vuex'
export default {
	name: 'IOTType',
	props: {
		type: {
    		type: String,
			default: 'fireControl'
    	},
    	data: {
    		type: Object,
			default () {
				return {}
			}
    	},
	},
	computed: {
		...mapState([
			'scale'
		]),
		title () {
			let title = ''
			switch(this.type){
				case 'fireControl' :
				case 'pool' :
				case 'warehouse' :
					title = '设备运行状态'
					break
				default:
					title = '报警类型'
					break
			}
			return title
		}
	},
	watch: {
		scale () {
			this.renderChart()
		}
	},
	data () {
		return {
			loading: false,
			chartData: null,

		}
	},
	methods: {
		renderChart (isPercentage) {
			let that = this
			let width = this.scale*380
			let height = this.scale*200
			let data = this.chartData
			let options = {
				credits:{
					enabled: false
				},
				colors: ['#5B8FF9','#5AD8A6','#F6BD16'],
				chart: {
					width: width,
					height: height,
					type: 'pie',
					backgroundColor:'transparent',
					spacing: 0,
					margin: [5*this.scale, 100*this.scale, 5*this.scale, 10*this.scale]
				},
				title: {
					text: ''
				},
				plotOptions: {
					pie: {
						innerSize: '60%',
						dataLabels: {
							enabled: true,
							allowOverlap: true, // 允许数据标签重叠
							color:"#AFECFF",
							borderWidth: 0,
							style:{
								fontSize:12*this.scale+'px'
							},
							distance: 20*this.scale,
							format: '{point.percentage:.1f} %',
						},
						borderWidth: 0,
						showInLegend: true
					}
				},
				series: [{
					name: isPercentage ? '百分比' : '数量',
					data: data
				}],
				legend: {
					enabled: true,
					align: 'right',
					layout: 'vertical',
					floating: true,
					verticalAlign: 'middle',
					itemStyle:{
						color:"#AFECFF",
						fontSize:12*this.scale+'px'
					},
					itemMarginTop: 10*this.scale,
					itemHoverStyle: {
						color:"#ffffff"
					},
				},
				tooltip: {
					valueSuffix: isPercentage ?'%':''
				 	// formatter: function () {
					// 	let tip='<span style="padding-bottom:5px;font-size:12px;">' + this.point.name + '</span><br><b>'+this.point.series.name+'</b>: ' + this.point.y
					// 	if(isPercentage){
					// 		tip = tip+ '%'
					// 	}
				 	// 	return tip
				 	// }
				 },
			}
			HighCharts.chart('typeChart',options)
		},
		getNumber (str) {
			// let number = str.substr(0, str.length - 1)
			let number = str ? +str : 0
			return number
		},
		setChartData () {
			let chartData = null
			if(this.type=='gas'){
				chartData = [['可燃气',this.getNumber(this.data.gasProportion)]]
			}
			if(this.type=='smoke'){
				chartData = [
					['烟雾报警',this.getNumber(this.data.smokeProportion)],
					['信号异常',this.getNumber(this.data.signalProportion)],
				]
			}
			if(this.type=='monitor' || this.type=='video' || this.type=='kitchen' || this.type=='health'){
				chartData = [
					['火焰报警',this.getNumber(this.data.fireProportion)],
					['消防通道报警',this.getNumber(this.data.passWayProportion)],
					['脱岗离岗报警',this.getNumber(this.data.leaveProportion)],
					['电动车识别报警',this.getNumber(this.data.electricVehicleProportion)],
				]
			}
			if(this.type == "fire" || this.type == "chargingStation"){
				chartData = [
					['温度报警',this.getNumber(this.data.temperatureProportion)],
					['漏电流报警',this.getNumber(this.data.leakageCurrentProportion)],
					['电流报警',this.getNumber(this.data.currentProportion)],
					['电压报警',this.getNumber(this.data.voltageProportion)],
				]
			}
			if(this.type=='gasStation'){
				chartData = [
					['卸油分析',this.getNumber(this.data.unloadingAnalysisProportion)],
					['人员检测',this.getNumber(this.data.personnelDetectionProportion)],
				]
			}
			if(this.type=='ladderControl'){
				chartData = [
					['电动车识别',this.getNumber(this.data.electricVehicleProportion)],
				]
			}
			if(this.type=='waters'){
				chartData = [
					['警戒识别',this.getNumber(this.data.alertIdentificationProportion)],
				]
			}
			if(this.type=='eye'){
				chartData = [
					['火焰报警',this.getNumber(this.data.fireProportion)],
					['消防通道报警',this.getNumber(this.data.passWayProportion)],
					['脱岗离岗报警',this.getNumber(this.data.leaveProportion)],
				]
			}

			if(this.type=='fireControl' || this.type=='pool' || this.type=='extinguisher' || this.type=='auto' || this.type=='waterPump'||this.type=='warehouse'){
				chartData = [
					['报警设备',this.data.alarmCount],
					['正常设备',this.data.normalCount],
					['离线设备',this.data.offLineCount],
					['故障设备',this.data.faultCount],
				]
     		 }
			
			this.chartData = chartData
		}
	},
	mounted () {
		this.setChartData()
		
		// this.chartData = [
		// 	['类型1', 28],
		// 	['类型2', 30],
		// 	['类型3', 10]
		// ]
		if(this.chartData){
			this.renderChart(this.type!='fireControl' && this.type!='pool')
		}
	},
}
</script>